<template>
  <div>
    <el-upload
      :action="uploadURL"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      list-type="picture"
      :headers="headers">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

    <!-- 图片dialog -->
    <add-good-pic-dialog :showImgUrl="showImgUrl"></add-good-pic-dialog>
  </div>
</template>

<script>
// 组件
  import AddGoodPicDialog from '@/views/Main/goods_manage/add_good/add_good_component/AddGoodPicDialog';

export default {
  data() {
    return {
      uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload', // 图片上传地址
      headers: { // 请求头
        Authorization: window.sessionStorage.getItem('token') // token信息
      },
      showImgUrl: ''
    }
  },
  props: {
    addFormObj: Object
  },
  methods: {
    handleSuccess(response) { // 图片上传成功回调
      // console.log(response);
      this.showImgUrl = response.data.url;
      return this.addFormObj.pics.push({pic: response.data.tmp_path});
    },
    handlePreview() { // 点击图片触发
      this.$bus.$emit('picDialogOpen');
    },
    handleRemove(file) { // 监听移除图片回调
      return this.addFormObj.pics.splice(this.addFormObj.pics.findIndex(item => file.response.data.tmp_path === item.pic), 1);
    }
  },
  components: {
    AddGoodPicDialog
  }
}
</script>

<style>

</style>